<template>
    <div class="coupons">
       
        <div class="coupon1">
            <router-link to="/info">
                 <img src="../assets/img/coupon1.png" alt="">
            </router-link>
            
             <span>￥200</span>
        </div>
        
        <div class="coupon1">
             <img src="../assets/img/coupon1.png" alt="">
             
             <span>￥200</span>
        </div>
        <div class="coupon1">
             <img src="../assets/img/1.jpg" alt="">
             
             <span>￥200</span>
        </div>
        <!-- <div class="coupon2">
             <img src="../assets/img/coupon1.png" alt="">
             <p>200元菜金抵用券</p>
             <span>￥200</span>
        </div> -->
       
    </div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    methods: {

    }
}
</script>
<style scoped>
.coupon1 {
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
img {
    width: 100%;
}

span {
    position: absolute;
    width: 55px;
    height: 25px;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    top: 15%;
    right: 4%;
    font-size: 18px;
    color: #ffffff;

}
</style>
